<template>
    <div class="popover">
        <div class="popover-cont">
            <div class="popover-title">
                <p>参评人员信息</p>
                <span @click="cancel"></span>
            </div>
            <div class="p-content">
                <div class="main-info">
                    <h6>{{mainInfoTitle}}</h6>
                    <div v-if="baseUserInfo">
                        <div class="basic-info">
                            <div class="formItem">
                                <div class="name">姓名：</div>
                                <div style="cursor: pointer" @click="handleToBasicInfo" class="value">{{baseUserInfo.name}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">参评职称：</div>
                                <div class="value">{{baseUserInfo.titleType}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">部职别：</div>
                                <div class="value">{{baseUserInfo.official_rank}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">出生年月：</div>
                                <div class="value">{{baseUserInfo.birth.substring(0, 7)}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">年龄：</div>
                                <div class="value">{{baseUserInfo.age}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">人员类别：</div>
                                <div class="value">{{baseUserInfo.personnel_category}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">现专业技术职务：</div>
                                <div class="value">{{baseUserInfo.technology_title}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">现专业技术职务时间：</div>
                                <div class="value">{{baseUserInfo.appoint_time.substring(0, 7)}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">现技术等级：</div>
                                <div class="value">{{baseUserInfo.technology_level}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">现技术等级时间：</div>
                                <div class="value">{{baseUserInfo.technology_level_time.substring(0, 7)}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">入伍(工作)时间：</div>
                                <div class="value">{{baseUserInfo.enlistment_time.substring(0, 7)}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">入党(团)时间：</div>
                                <div class="value">{{(baseUserInfo.caucus_time).substring(0, 7)}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">学历：</div>
                                <div class="value">{{baseUserInfo.last_education}}</div>
                            </div>
                            <div class="formItem">
                                <div class="name">学位：</div>
                                <div class="value">{{baseUserInfo.highest_degree}}</div>
                            </div>
                        </div>
                        <div class="adopt-cont">
                            <div class="adopt-box">
                                <div>
                                    <img v-if="adopt.education" src="../../assets/reviews/adopt-pic1.png"/>
                                </div>
                                <div>
                                    <img v-if="adopt.kyobo" src="../../assets/reviews/adopt-pic2.png"/>
                                </div>
                                <div>
                                    <img v-if="adopt.research" src="../../assets/reviews/adopt-pic3.png"/>
                                </div>
                                <div>
                                    <img v-if="adopt.politics" src="../../assets/reviews/adopt-pic4.png"/>
                                </div>
                            </div>
                            <div class="fixedBottomOperation">
                                <el-button @click="handleAdminSubmit" type="warning" size="mini">确认审核</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="apply-content">
                        <template v-if="tableData.length>0">
                            <div class="content-table" v-for="(n,j) in tableData" :key="j">
                                <div class="text-area">
                                    <div class="tips-box">
                                        <label>请参考此格式对输入框内容进行填写：</label>
                                        <p v-html="n.listReviewWord"></p>
                                    </div>
                                    <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 3, maxRows: 4}"
                                        placeholder="请输入内容"
                                        resize="none"
                                        maxlength="200"
                                        show-word-limit
                                        v-model="n.listReviewCallback">
                                    </el-input>
                                </div>
                            </div>
                            <div class="bottomOperation">
                                <el-button type="primary" size="mini" @click="save()" :loading="isSaving">保存</el-button>
                            </div>
                        </template>
                        <div v-show="mainInfoTitle && tableData.length == 0 && asideIndex" class="Information-tips">暂无信息</div>
                    </div>
                </div>
                <div class="aside-fr">
<!--                    <h6 class="moduleName">个人信息</h6>-->
                    <div v-for="(item,i) in asideNav" :key="i"
                         @click="handleAsideActive(i,item.path)"
                         :class="{active:i == asideIndex}">
                        {{item.name}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {applyParticipate, updateDataByUserId,adminFind,adminSubmit} from "@/service/api";
import Qs from "qs";

export default {
    name: "adminEditReviewsApply",
    data() {
        return{
            asideNav: [
                {name:'基本信息',path:'baseUserInfo'},
                {name:'培训经历',path:'trainingExperience'},
                {name:'教学工作量',path:'teachingSituation'},
                {name:'教学质量',path:'teachingQuality'},
                {name:'教学成果及奖励',path:'teachingReward'},
                {name:'指导学生',path:'guideStudents'},
                {name:'教材讲义',path:'textbookHandout'},
                {name:'科技成果及奖励',path:'teachingAchievements'},
                {name:'参与科研项目情况',path:'scientificProjects'},
                {name:'专著情况',path:'monographs'},
                {name:'学术论文',path:'academicPapers'},
                {name:'入选人才工程计划和个人表彰奖励项目',path:'talentEngineering'},
                {name:'奖惩情况',path:'rewardPunishment'},
                {name:'完成任务情况',path:'completionTasks'},
                {name:'完成其他工作简述',path:'otherWorkDescription'},
            ],
            asideIndex: 0,
            mainInfoTitle:null,
            baseUserInfo:null, //基本信息
            tableData:[],
            pathActive:'baseUserInfo',
            isSaving:false,
            preserveDate:{},
            adopt:{},
        }
    },
    props:['showPreviewUserId'],
    created() {
        this.getApplygointo()
    },
    methods:{
        cancel() {
            this.$emit('update:showPreview',false)
        },
        handleAsideActive(i,path){
            this.asideIndex = i;
            this.pathActive = path;
            this.getApplygointo()
        },

        handleAdminFind() { //获取是否确认审核
            let params = { id:this.baseUserInfo.id };
            adminFind(Qs. stringify(params)).then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.adopt = res.data
                }
            })
        },
        handleAdminSubmit() { //确认审核
            let params = { id:this.baseUserInfo.id };
            adminSubmit(Qs. stringify(params)).then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.$message({message: '审核成功！',type: 'success'});
                    this.handleAdminFind()
                }
            })
        },
        getApplygointo(){ //获取信息
            let params = {intfaceType:this.pathActive,userId:this.showPreviewUserId};
            this.mainInfoTitle = this.asideNav[this.asideIndex].name;
            applyParticipate(Qs.stringify(params)).then(res => {
                if (res.code == 200) {
                    if(res.data.baseUserInfo !== undefined){
                        this.baseUserInfo = res.data.baseUserInfo;
                        this.handleAdminFind()
                        this.tableData = []
                    }else {
                        let newArray = this.objToArray(res.data)
                        newArray.forEach((item)=>{
                            if(typeof item.listReview == 'object'){
                                item.listReview.sort(this.sortBy("attr1"));
                                item.listReview.forEach(n=>{
                                    item.tableHead = Object.assign([],Object.keys(n).filter(v=> v !=='attr1'))
                                });

                            }
                            if(item.listReviewWord){
                                item.listReviewWord = item.listReviewWord.replace(/\n/g,"<br>");
                                item.listReviewWord = item.listReviewWord.replace(/&emsp;/g,"&emsp;&emsp;");
                            }
                        });
                        this.tableData = newArray;
                        this.preserveDate = {};
                        console.log(Object.keys(res.data))
                        Object.keys(res.data).forEach(item=>{
                            this.preserveDate[item] = ''
                        })
                        console.log(this.preserveDate)
                        this.baseUserInfo = null
                    }
                } else {
                    console.log(res)
                }
            })
        },
        save() {
            let isModify = false;
            this.isSaving = true;
            if(this.preserveDate.userId){
                delete this.preserveDate.userId //true
            }
            Object.keys(this.preserveDate).forEach((key,i)=>{
                console.log(key)
                if(this.tableData[i].listReviewCallback != this.tableData[i].listReviewWord){
                    this.preserveDate[key] = this.tableData[i].listReviewCallback;
                    isModify = true;
                }
            });
            if(isModify){
                this.preserveDate.userId = this.showPreviewUserId;
                console.log(this.preserveDate)
                updateDataByUserId(Qs. stringify(this.preserveDate)).then(res => {
                    if (res.code == 200) {
                        console.log(res)
                        this.$message({
                            message: '保存成功！',
                            type: 'success'
                        });
                    } else {
                        console.log(res)
                    }
                    this.isSaving = false;
                }).catch(err => {
                    console.log(err)
                    this.isSaving = false;
                })
            }else {
                // this.$message.error('内容未修改！');
                this.isSaving = false;
            }
            // console.log(this.preserveDate)
        },
        handleToBasicInfo() {
            let query = { userId:this.baseUserInfo.user_id }
            let routeData = this.$router.resolve({ path: '/personalInfo', query: query});
            window.open(routeData.href, '_blank');
        },
        sortBy(props) {
            return function(a,b) {
                return a[props] - b[props];
            }
        },
        objToArray (array) {
            let arr = []
            for (let i in array) {
                arr.push(array[i]);
            }
            return arr;
        }
    }

}
</script>

<style scoped>
.popover {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popover-cont {
    background: white;
    width: 70%;
    min-width: 680px;
    font-size: 14px;
    box-shadow: 3px 1px 12px 1px #00000069;
    border-radius: 16px;
    padding-bottom: 30px;
    position: relative;
    height: 80%;
    min-height: 650px;
}

.popover-title {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    padding: 14px 0px;
    background: url('../../assets/reviews/icon_tu@2x.png') no-repeat;
    background-size: 100% 100%; /* 背景图完整覆盖容器，但宽高比例变了，图片变形。*/
}

.popover-title > span {
    display: block;
    width: 20px;
    height: 20px;
    background: url("../../assets/reviews/icon_shanchu@2x.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 30px;
    top: 20px;
    cursor: pointer;
}
.p-content{
    width: 100%;
    height: calc(100% - 40px);
    min-height: 550px;
    display: flex;
}
.main-info{
    width: 90%;
    height: calc(100% - 62px);
    margin: 30px 0 0 38px;
    overflow-y: auto;
}
.apply-content{
    width: 93%;
    /*margin: 0 auto;*/
}
.main-info h6{
    font-size:15px;
    font-weight:bold;
    color:rgba(50,72,144,1);
    line-height:23px;
    display: block;
}
/* 基本情况 */
.basic-info{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
}
.formItem{
    width: 33%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color:#333333;
    font-size: 15px;
    margin:10px 0px 20px;
}
.formItem>.name{
    text-align: right;
    padding-right: 4px;
    width: 40%;
}
.formItem>.value{
    width: 50%;
    color:rgba(237,88,102,1);
}
.content-table{
    margin: 13px 0px;
    overflow: hidden;
    padding-top: 24px;
    padding-bottom: 10px;
    border-top: 4px #F1F1F1 solid;
}
.content-table:first-child{
    border-top: none;
    padding-top: 0px;
}
.content-table >>> .el-table{
    border-radius: 5px 5px 0px 0px;
}
.content-table >>> .table-header th {
    background: #E6EAEB !important;
    border: none;
}
.content-table >>> .table-header th div{
    font-weight:bold !important;
    color: #333;
}
.text-area{
    margin-top: 6px;
}
.bottomOperation{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 20px;
}
.bottomOperation>button{
    width:120px;
}
.aside-fr{
    width: 200px;
    min-height: 520px;
    /*max-height: 800px;*/
    /*box-sizing: border-box;*/
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
    border-radius: 5px;
    overflow: hidden;
    margin: 30px 10px 0 0;
}
.aside-fr > div{
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: #999999;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-size: 14px;
}
.aside-fr > div.active{
    background: #F5F8FD;
    color: #31478F;
    font-weight: bold;
    position: relative;
}
.aside-fr > div.active::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 38px;
    background: #31478F;
}
.moduleName {
    background: #31478F;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    padding: 11px 0px;
    text-align: center;
    color: white;
    border-top-left-radius: 5px;
}
.tips-box{
    font-size: 14px;
}
.tips-box label{
    display: block;
    margin-bottom: 6px;
}
.tips-box p{
    color: #999;
    margin-bottom: 4px;
}
.Information-tips{
    text-align: center;
    font-size: 28px;
    margin-top: 50px;
}
.adopt-box{
    display: flex;
    margin: 20px 20px 20px 0px;
    justify-content: space-between;
}
.adopt-box div{
    width: 20%;
}
.adopt-box img{
    display: block;
    width: 100%;
    opacity: 0.8;
}
/* 底部提交按钮 */
.fixedBottomOperation{
    display: flex;
    justify-content: center;
    /*background: white;*/
    padding: 21px 0px;
    position: absolute;
    bottom: 0px;
    left: 16px;
    right: 200px;
    z-index: 1;
    /*box-shadow: -2px -2px 15px 0px rgba(0, 0, 0, 0.2);*/
    /*border-top-left-radius: 5px;*/
    /*border-top-right-radius: 5px;*/
}
.fixedBottomOperation>button{
    margin: 0px 36px;
    font-size: 15px;
    padding: 7px 38px;
}
</style>
